<template>
  <div class="use-gas-law-wrap">
    <div class="data-box">
      <table>
        <tr v-for="(item, index) of tableList" :key="index.toString()">
          <td class="index-num">{{ index + 1 }}</td>
          <td v-for="(obj, index) of item" :key="index" :class="{ active: obj.active }">{{ obj.value }}</td>
        </tr>
      </table>
    </div>
  </div>
</template>
<script>
import { each, max, fill, zip } from 'lodash'

export default {
  name: 'history-verify-use-gas-law',
  props: {
    content: {
      type: Array
    }
  },
  computed: {
    tableList() {
      const _dataList = []
      each(this.content, item => {
        const { usage } = item
        _dataList.push(usage)
      })
      if (!_dataList || _dataList.length < 1) {
        return
      }
      const _dMaxList = max(_dataList)
        .toString()
        .split('.')
      const _intLen = _dMaxList[0].length
      const _newList = []
      each(_dataList, (item, index) => {
        if (item !== null) {
          const _itemStr = item.toString()
          const _itemList = _itemStr.split('.')
          const _intP = _itemList[0] || []
          const _floatP = _itemList[1] ? ['.', ..._itemList[1]] : []
          const _cIntLen = _intP.length
          const _m = _intLen - _cIntLen
          const _intL = _intP.split('')
          if (_m > 0) {
            for (let i = 0; i < _m; i++) {
              _intL.unshift('0')
            }
          }
          _newList.push([..._intL, ..._floatP])
        } else {
          _newList.push(fill(Array(_intLen), undefined))
        }
      })
      const _retList = this.arrToObj(_newList)
      const _errList = this.filterNum(_newList)
      each(_errList, item => {
        const [_a, _b] = item
        _retList[_b][_a].active = true
      })
      return _retList
    }
  },
  methods: {
    arrToObj(list = []) {
      const _retList = []
      each(list, item => {
        const _objList = []
        each(item, num => {
          _objList.push({
            value: num,
            active: false
          })
        })
        _retList.push(_objList)
      })
      return _retList
    },
    filterNum(list = []) {
      const _newArr = zip(...list)
      const _retList = []
      for (let i = 0; i < _newArr.length; i++) {
        let _cNum
        for (let j = 0; j < _newArr[i].length; j++) {
          if (j === 0) {
            _cNum = _newArr[i][j]
          } else if (_newArr[i][j] !== undefined) {
            if (_cNum !== _newArr[i][j]) {
              _retList.push([i, j])
              break
            }
          }
        }
        if (_retList.length >= 2) break
      }

      return _retList
    }
  }
}
</script>
<style lang="less" scoped>
.use-gas-law-wrap {
  width: 100%;
  height: 100%;
  position: relative;

  .data-box {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow-y: auto;

    table {
      padding: 10px;
      width: 100%;
      font-size: 16px;
      box-sizing: border-box;
      color: #fff;
    }
    td {
      text-align: center;
    }
    .index-num {
      font-size: 12px;
      width: 26px;
      opacity: 0.6;
    }
    .active {
      border: 1px solid #ff0000;
      color: #ff0000;
    }
  }
}
</style>
